<!--
 * @Author: your name
 * @Date: 2021-06-21 14:47:17
 * @LastEditTime: 2021-07-01 12:26:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xbsg-platform-ui\src\views\portal\fileData\idetIndex.vue
-->
<template>
  <div class="file">
    <!-- 添加或修改文件数据对话框 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="文件排序" prop="fileSort">
        <el-input v-model="form.fileSort" placeholder="请输入文件排序" />
      </el-form-item>
      <el-form-item label="文件key" prop="fileKey">
        <el-input v-model="form.fileKey" placeholder="请输入文件key" />
      </el-form-item>
      <el-form-item label="文件名称" prop="fileName">
        <el-input v-model="form.fileName" placeholder="请输入文件名称" />
      </el-form-item>
      <el-form-item label="关联新闻" prop="linkId">
        <el-select v-model="form.linkId" placeholder="请选择关联新闻">
          <el-option
            v-for="item in newsOptions"
            :key="item.id"
            :label="item.newsTitle"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文件类型" prop="fileType">
        <el-select v-model="form.fileType" placeholder="请选择文件类型">
          <el-option
            v-for="item in fileTypeList"
            :key="item.val"
            :label="item.label"
            :value="item.val"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="form.fileType === 0"
        label="图片上传"
        prop="fileUrl"
        class="upload-form-item"
      >

        <ImageUpload v-model="form.fileUrl" :min-height="192" />
      </el-form-item>
      <el-form-item
        v-if="form.fileType === 1"
        label="文档上传"
        prop="fileUrl"
        class="upload-form-item"
      >

        <FileUpload v-model="form.fileUrl" :min-height="192" />
      </el-form-item>
      <el-form-item v-if="form.fileType === 2" label="视频上传" prop="fileUrl">
        <el-upload
          ref="uploadVideo"
          :action="actionUrl"
          :headers="headers"
          multiple
          :limit="1"
          :on-success="handleUploadSuccess"
          :file-list="fileList"
          :before-upload="beforeVideoUpload"
          :data="uploadData"
        >
          <!-- :auto-upload="false" -->
          <el-button plain slot="trigger" size="mini" type="primary"
            >选择视频</el-button
          >
          <div class="el-upload__tip">格式支持MP4，文件大小不超过10MB</div>
          <video width="320" height="240" v-if="form.fileUrl" controls>
            <source :src="form.fileUrl" type="video/mp4">
            <source :src="form.fileUrl" type="video/ogg">
            <source :src="form.fileUrl" type="video/webm">
            <object data="movie.mp4" width="320" height="240">
              <embed :src="form.fileUrl" width="320" height="240">
            </object>
          </video>
        </el-upload>
      </el-form-item>

      <el-form-item v-if="form.fileType === 3" label="音频上传" prop="fileUrl">
        <el-upload
          :action="actionUrl"
          :headers="headers"
          multiple
          :limit="1"
          :on-success="handleUploadSuccess"
          :file-list="fileList"
          :before-upload="beforeVoiceUpload"
          :data="uploadData"
        >
          <el-button type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            格式支持mp3/wma/wav/amr，文件大小不超过2M，播放长度不超过60s
          </div>
        </el-upload>
        <audio  class="vid_aud" v-if="form.fileUrl" :src="form.fileUrl">
          您的浏览器不支持 audio 标签。
          </audio>
      </el-form-item>
      <el-form-item prop="status" label="状态">
        <el-select v-model="form.status" placeholder="请选择状态">
          <el-option
            v-for="item in filestatusList"
            :key="item.val"
            :label="item.label"
            :value="item.val"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="详细文件用途信息"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { listNews } from "@/api/portal/news";
import {
  getFileData,
  addFileData,
  updateFileData,
} from "@/api/portal/fileData";
import { fileupload } from "@/api/menu";
import { getToken } from "@/utils/auth";
import FileUpload from "@/components/FileUpload";
import ImageUpload from "@/components/ImageUpload";
export default {
  components: {
    FileUpload,
    ImageUpload
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        fileName: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
        fileKey: [{ required: true, message: '请输入文件key', trigger: 'blur' }],
        fileUrl: [{ required: true, message: '请上传文件', trigger: 'change' }],
        fileType: [{ required: true, message: '请选择文件类型', trigger: 'change' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },

      fileTypeList: [
        { label: "图片", val: 0 },
        { label: "文档", val: 1 },
        { label: "视频", val: 2 },
        { label: "音乐", val: 3 },
      ],
      filestatusList: [
        { label: "正常", val: "0" },
        { label: "停用", val: "1" },
      ],
      newsOptions: [],
      // 上传图片
      dialogVisible: false, // 查看封面缩略图 dialog
      coverImageLimit: 1, // 封面图的个数
      coverAddhide: false, // 封面加号隐藏
      coverImag: [],
      // 视频上传
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      actionUrl: "/dev-api/system/file/upload",
      fileList: [],
      uploadData: {
        mediaType: "image",
        title: "",
        introduction: "",
      },
    };
  },
  beforeRouteEnter(to, from, next) {
    if (to.query.id) {
      to.meta.title = "编辑文件数据";
    } else {
      to.meta.title = "新增文件数据";
    }
    next();
  },
  created() {
    this.reset()
    this.form.groupKey = this.$route.query.groupKey;
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id;
      this.getFileInfo();
    }
  },
  mounted() {
    this.getnewsList();
  },
  methods: {
    getFileInfo() {
      getFileData(this.form.id).then((response) => {
        this.form = response.data;
        this.coverImag = [{ url: this.form.fileUrl }];
        this.coverAddhide = true;
      });
    },
    // 取消按钮
    cancel() {
      this.returntomenu();
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        fileSort: null,
        fileName: null,
        fileUrl: null,
        linkId: null,
        fileType: 0,
        groupKey: null,
        status: "0",
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateFileData(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.returntomenu();
            });
          } else {
            addFileData(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.returntomenu();
            });
          }
        }
      });
    },

    /** 查询新闻列表 */
    getnewsList() {
      listNews(this.queryParams).then((response) => {
        this.newsOptions = response.rows;
      });
    },

    /*****************      视频上传      *******************************/

    beforeThumbImageUpload(file) {
      const isType =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif" ||
        file.type === "image/bmp" ||
        file.type === "image/jpg";
      const isLt = file.size / 1024 / 1024 < 2;
      if (!isType) {
        this.msgError("上传图片格式不对!");
      }
      if (!isLt) {
        this.msgError("上传图片大小不能超过2M!");
      }
      this.addMaterialLoading = false;
      return isType && isLt;
    },
    beforeImageUpload(file) {
      const isType =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif" ||
        file.type === "image/bmp" ||
        file.type === "image/jpg";
      const isLt = file.size / 1024 / 1024 < 2;
      if (!isType) {
        this.msgError("上传图片格式不对!");
      }
      if (!isLt) {
        this.msgError("上传图片大小不能超过2M!");
      }
      return isType && isLt;
    },
    beforeVoiceUpload(file) {
      const isType =
        file.type === "audio/mp3" ||
        file.type === "audio/wma" ||
        file.type === "audio/wav" ||
        file.type === "audio/amr";
      const isLt = file.size / 1024 / 1024 < 5;
      if (!isType) {
        this.msgError("上传音乐格式不对!");
      }
      if (!isLt) {
        this.msgError("上传音乐大小不能超过5M!");
      }
      return isType && isLt;
    },
    beforeVideoUpload(file) {
      const isType = file.type === "video/mp4";
      const isLt = file.size / 1024 / 1024 < 10;
      console.log(file, "视频");
      if (!isType) {
        this.msgError("上传视频格式不对!");
      }
      if (!isLt) {
        this.msgError("上传视频大小不能超过10M!");
      }
      return isType && isLt;
    },
    handleUploadSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.fileList = [];
        this.uploadData.title = "";
        this.uploadData.introduction = "";
          this.form.fileUrl = "http://" + response.data.url;
        this.msgSuccess('上传成功')
      } else {
        this.msgError("上传出错：" + response.msg);
      }
    },
  },
};
</script>

<style>
.file .hide .el-upload--picture-card {
  display: none;
}
</style>
<style scoped lang="scss">
.file {
  padding: 20px;
  box-sizing: border-box;
  width: 50%;
  .dialog-footer {
    display: flex;
    justify-content: center;
  }
  .vid_aud{
    width: 300px;
    height: 150px;
  }
}
</style>
